<template>
    <div>
        <lunar-full-calendar ref="calendar" :events="events" :config="config"></lunar-full-calendar>

    </div>
</template>

<script>
//  window.lunar(date)
export default {
    data() {
        return {
            events: [
                {
                    id: 1,
                    title: 'event 1',
                    start: '2022-08-01',
                    end: "2022-08-06",
                    color: 'purple',
                },
                {
                    id: 2, title: 'event 2', start: '2021-10-22', color: 'purple',
                },
                { title: 'event 334', start: '2022-08-09' },
                { title: 'event 4444', start: '2022-08-09' },
                { title: 'event 55534', start: '2022-08-09' },
                { title: 'event 66634', start: '2022-08-09' },
                { title: 'event 777734', start: '2022-08-09' },
                { title: 'event 86664', start: '2022-08-09' },
                { title: 'event 9996664', start: '2022-08-09' },

                { title: 'event 4', start: '2022-08-11' },
                { title: 'event 5', start: '2022-08-12' },
                { title: 'event 6', start: '2022-08-14', color: 'purple' },
                { title: 'event 7', start: '2022-08-21' },
                {
                    id: 3,
                    title: 'event 9',
                    start: '2022-09-03 ',
                    end: '2021-09-11',
                    // color: 'purple',
                    // extendedProps: {
                    //     description: 'asdasdasdasdasdasdasdasds',
                    // },
                    allDay: true,
                },
                {
                    id: 4,
                    title: 'event 7',
                    start: '2021-09-08',

                },
            ],
            config: {
                lunarCalendar: true, // 是否显示农历
                fixedWeekCount: false,// 设置false没有显示5周，不设置则默认显示6周
                firstDay: 1,//设置一周中显示的第一天是哪天，周日是0，周一是1，类推
                aspectRatio: 2.5,// 设置日历单元格宽度与高度的比例
                // height: 600,
                headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
                    right: 'today prev,next',
                    center: 'title',
                    left: 'timeGridDay,timeGridWeek,dayGridMonth'
                },
                // header: {
                //     left: 'prev title next today',
                //     center: '',
                //     right: ''
                //     //   right: 'custom, month,agendaWeek,agendaDay'
                // },
                // 配置标题年月格式展示
                views: {
                    month: {
                        titleFormat: 'YYYY年MMM'
                    },
                },
                // eventOrder:'index',   // 这个是控制事件排序的功能，意思是 按照字段 事件数据中index来排序
                // eventLimitClick: 'day', //点击今天日列表图
                handleWindowResize: true,
                buttonText: { today: "今天", month: "月", week: "周", day: "日" },
                locale: "zh-cn",
                editable: false, //是否允许修改事件
                selectable: false,
                eventLimit: 4, //事件个数
                allDaySlot: false, //是否显示allDay
                defaultView: "month", //显示默认视图
                eventClick: this.eventClick, //点击事件
                dayClick: this.dayClick, //点击日程表上面某一天
                eventMouseover: this.eventMouseover, // 鼠标放上时候的事件
                customButtons: {
                    prev: { // this overrides the prev button
                        text: "PREV",
                        click: () => {
                            this.prev();
                        }
                    },
                    next: { // this overrides the next button
                        text: "NEXT",
                        click: () => {
                            this.next();
                        }
                    },
                    today: {
                        text: "今天",
                        click: () => {
                            this.today();
                        }
                    }
                }
            }
        }
    },
    methods: {
        today(mouseEvent, htmlElement) {
            this.$refs.calendar.fireMethod('today')
    },
    next(mouseEvent, htmlElement) {
      // calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
      this.$refs.calendar.fireMethod('next')
      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
    },
    prev(mouseEvent, htmlElement) {
        this.$refs.calendar.fireMethod('prev')
    //   this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
      // 如果dayGridMonth查看日历，则将日历后移一个月。
      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
    },
    },
    mounted() {
    // 这里有两点要注意，想要调用插件的方法，要在组件上设置ref
    // 并且在组件未加载的时候this.$refs中是没有fullCalendar的，所以未加载的时候调用方法会报错
        //  this.calendarApi = this.$refs.fullCalendar.getApi(); 
        //  let divBox = document.getElementsByClassName("fc-highlight")[0];
        //  console.log("div2222",divBox)


      
  
},
}

</script>
    

